/// TimeSeriesChart: Use tickProviderSpec & tickFormatterSpec in StaticDateTimeTickProviderSpec.
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

var data1 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 5),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 25),
  new LinearSales(DateTime(2019, 4, 14, 16, 00), 100),
  new LinearSales(DateTime(2019, 4, 13, 16, 00), 75),
  new LinearSales(DateTime(2019, 4, 12, 16, 00), 78),
];

var data2 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 25),
  new LinearSales(DateTime(2019, 4, 16, 04, 00), 55),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 99),
  new LinearSales(DateTime(2019, 4, 15, 04, 00), 75),
  new LinearSales(DateTime(2019, 4, 14, 16, 00), 75),
];

var data3 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 5),
  new LinearSales(DateTime(2019, 4, 16, 08, 00), 25),
  new LinearSales(DateTime(2019, 4, 16, 00, 00), 100),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 75),
  new LinearSales(DateTime(2019, 4, 15, 08, 00), 78),
];

var data4 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 25),
  new LinearSales(DateTime(2019, 4, 16, 10, 00), 55),
  new LinearSales(DateTime(2019, 4, 16, 04, 00), 99),
  new LinearSales(DateTime(2019, 4, 15, 22, 00), 75),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 75),
];

var data5 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 5),
  new LinearSales(DateTime(2019, 4, 16, 11, 12), 25),
  new LinearSales(DateTime(2019, 4, 16, 06, 24), 100),
  new LinearSales(DateTime(2019, 4, 16, 01, 46), 75),
  new LinearSales(DateTime(2019, 4, 15, 20, 48), 78),
];

var data = [
  data1,
  data2,
  data3,
  data4,
  data5,
];

void main() {
  runApp(MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.fallback(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Chart Demo'),
        ),
        body: PointsLineChart(),
      )
  ));
}

class PointsLineChart extends StatefulWidget {
  @override
  PointsLineChartState createState() => PointsLineChartState();
}

class PointsLineChartState extends State<PointsLineChart> {

  int index = 0;
  int previousIndex;
  List<LinearSales> lineData = data[0];

  Widget chartWidget() {
    var series = [
      new charts.Series<LinearSales, DateTime>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (LinearSales sales, _) => sales.dataTime,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: lineData,
      )
    ];

    final tickSpecs = <charts.TickSpec<DateTime>>[
      new charts.TickSpec(
        lineData[0].dataTime,
      ),
      new charts.TickSpec(
        lineData[1].dataTime,
      ),
      new charts.TickSpec(
        lineData[2].dataTime,
      ),
      new charts.TickSpec(
        lineData[3].dataTime,
      ),
      new charts.TickSpec(
        lineData[4].dataTime,
      ),
    ];

    var chart = new charts.TimeSeriesChart(series,
      animate: false,
      defaultRenderer: new charts.LineRendererConfig(includePoints: true),
      /// Measure Axis (y-axis)
      primaryMeasureAxis: charts.NumericAxisSpec(
        tickProviderSpec: charts.BasicNumericTickProviderSpec(
          desiredTickCount: 5
        ),
      ),
      /// Domain axis (x-axis)
      domainAxis: new charts.DateTimeAxisSpec(
        tickProviderSpec: charts.StaticDateTimeTickProviderSpec(tickSpecs),
        tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
          day: new charts.TimeFormatterSpec(format: 'dd/MM\nhh:mm', transitionFormat: 'dd/MM\nhh:mm'),
          hour: new charts.TimeFormatterSpec(format: 'dd/MM\nhh:mm', transitionFormat: 'dd/MM\nhh:mm'),
        ),
      ),
    );

    return Container(
      height: 350,
      padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
      child: new Card(
          child: GestureDetector(
            onScaleUpdate: (ScaleUpdateDetails scaleDetails) {
              debugPrint("scale details:" + scaleDetails.toString());
            },
            child: Padding(
              padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
              child: chart,
            ),
          )
      ),
    );
  }

  bool _enabled = true;

  @override
  Widget build(BuildContext context) {
    var _zoomIn, _zoomOut;
    if (_enabled) {
      _zoomIn = () {
        debugPrint("preIndex=$previousIndex curIndex=$index click Zoom in.");
        previousIndex = index;
        index++;
        if (index > 4) index = 4;
        setState(() {
          lineData = data[index];
           _enabled = false;
        });
        Future.delayed(const Duration(milliseconds: 800), () {
         setState(() {
           _enabled = true;
         });
        });
      };

      _zoomOut = () {
        debugPrint("preIndex=$previousIndex curIndex=$index click Zoom out.");
        previousIndex = index;
        index--;
        if (index < 0) index = 0;
        setState(() {
          lineData = data[index];
           _enabled = false;
        });
        Future.delayed(const Duration(milliseconds: 800), () {
         setState(() {
           _enabled = true;
         });
        });
      };
    }

    return Column(
      children: <Widget>[
        Row(
          children: [
            new Expanded(
              child: chartWidget(),
            ),
          ],
        ),
        SizedBox(
          height: 35.0,
        ),
        Text('Current level ${index + 1}',
            style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700)),
        SizedBox(
          height: 35.0,
        ),
        RaisedButton(
          onPressed: _zoomIn,
          child: Text('Zoom in'),
        ),
        RaisedButton(
          onPressed: _zoomOut,
          child: Text('Zoom out'),
        ),
      ],
    );
  }
}

/// Sample linear data type.
class LinearSales {
  final DateTime dataTime;
  final int sales;

  LinearSales(this.dataTime, this.sales);
}
